<template>
  <div class="container">
    <div class="cheader1">商学院</div>
    <div class="box">
      <div class="b1">热门问题</div>
      <div class="ulbox">
        <div class="biaot">快问快答</div>
        <div
          class="libox"
          v-for="(item, index) in acticals.questions"
          :key="index"
          @click="toDetail(item)"
        >
          {{ item.title }}
        </div>
        <div class="biaot">区块链小知识</div>
        <div
          class="libox"
          v-for="(item, index) in acticals.blockchain"
          :key="index"
          @click="toDetail(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { ref, onMounted } from "vue";
import { useStore } from "@/store";
import { useRouter } from "vue-router";
import http from "@/utils/http";
const store = useStore();
const router = useRouter();
let acticals = ref<any>({});
onMounted(() => {
  handleActical();
});
const toDetail = (item: any) => {
  if(item.url){
    window.open(item.url)
    return
  }
  if (item.textContent) {
    store.commit("systems/updateDatas", {
      key: "detailContent",
      data: item,
    });
    router.push("/acticaldetail");
  }
};
const handleActical = () => {
  http.get("system/article/college").then((res: any) => {
    if (res.code === 0) {
      acticals.value = res.data;
    }
  });
};
</script>
    
<style lang="scss" scoped>
.box {
  padding: 10px;
  .b1 {
    font-size: 14px;
    color: #000;
    margin: 10px 0 10px;
  }
  .ulbox {
    // background: url("@/assets/images/dabk.png") center no-repeat;
    // background-size: 100% 100%;
    // min-height: 60vh;
    padding: 0 14px;
    // border-radius: 4px;
    overflow: hidden;
    .libox {
      height: 36px;
      line-height: 36px;
      color: #000;
      font-size: 14px;
    }
  }
}
.biaot{
  font-size:15px;
  margin:15px 0;
  color: #36b4ea;
}
</style>